<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <style>
        body{
            background-color: rgb(246, 246, 246);
        }
        .left{
            width: 830px;
            height: 1000px;
            background-color: rgb(246, 246, 246);
            /* background-color: white; */
            padding-left: 20px;
            padding-top: 20px;
            float: left;
        }
        .leftTop{
            width: 800px;
            height: 380px;
            background-color: white;
        }
        .leftBottom{
            width: 800px;
            height: 600px;
            margin-top: 20px;
            background-color: white;    

        }
        .right{
            width: 280px;
            height: 600px;
            /* background-color: white; */
            float: left;
            margin-top: 20px;
        }
        .bottom_title{
            width: 800px;
            height: 60px;
            border-bottom: 1px solid rgb(246, 246, 246);
            padding-top: 20px;
            padding-left: 20px;
        }
        .bottom_title>span{
            font-size: 20px;
            font-family: 黑体;
        }
        .bottom_content{
            width: 780px;
            height: 300px;
            overflow: hidden;
        }
        #bottom_title2{
            width: 780px;
            height: 130px;
            overflow: hidden;
            /* display: none; */
            
        }
        .bottom_title3{
            width: 780px;
            height: 30px;
            color: skyblue;
            line-height: 30px;
        }
        .right_top{
            width: 280px;
            height: 280px;
            overflow: hidden;
        }
        .clean_lear{
            width: 280px;
            margin-top: 20px;
            /* background-color: white; */
            /* line-height: 100px; */
            /* padding-left: 5px; */
            box-shadow: 0px 0px 5px #ccc;

        }
    </style>
    <script>
      //  $('[data-toggle="popover"]').popover()
     $(function () {
        var Random = Mock.Random
        Mock.mock("http://localhost:5500/api/getAllUsers",function(){
        var result = []
            var journalism = Mock.mock({
                'title':Random.csentence(18,30),
                'content':Random.cparagraph(15),

            })
            result.push(journalism)
        return result  
    })


    $.ajax({
        url:'http://localhost:5500/api/getAllUsers',
        type:'get',
        dataType:'json',
        success:function(e){
          console.log(document.querySelector('.bottom_content').firstElementChild.innerHTML=e[0].title)
          console.log(document.querySelector('.bottom_content').firstElementChild.nextElementSibling.innerHTML=e[0].content)
          
            }
    
        })







            // $('[data-toggle="popover"]').popover()
        if(sessionStorage['bookInfo']){
            var bookInfo = JSON.parse(sessionStorage['bookInfo'])
            var image = document.querySelector('.leftTop').firstElementChild
            var bookName = document.querySelector('.leftTop').firstElementChild.nextElementSibling
            var author = document.querySelector('.leftTop').firstElementChild.nextElementSibling.nextElementSibling
            var price = document.querySelector('.leftTop').firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerHTML
            image.src = bookInfo[0].image
            bookName.innerHTML = bookInfo[0].bookName
            author.innerHTML = bookInfo[0].author
            price.innerHTML = bookInfo[0].price
        }
        console.log(document.querySelector('.leftTop').firstElementChild.src)
         })
        function doShow(){
            if(document.querySelector('#bottom_title2').style.display=='block'){
                document.querySelector('#bottom_title2').style.display="none"
                document.querySelector('.bottom_title3').firstElementChild.innerHTML ="展开简介"
            }else{
                document.querySelector('#bottom_title2').style.display='block'
                document.querySelector('.bottom_title3').firstElementChild.innerHTML ="收起简介"

            }
        }
        function dianzan(that){
            if(that.style.color=="rgb(159, 173, 199)"){
            console.log(that.style.color="blue")
            var num = parseInt(that.nextElementSibling.innerHTML)+1
            console.log(that.nextElementSibling.innerHTML=num)
        }else{
            that.style.color="rgb(159, 173, 199)"
            var num = parseInt(that.nextElementSibling.innerHTML)-1
            console.log(that.nextElementSibling.innerHTML=num)
        }

    }
    function changeContent1(){
        document.querySelector('#contents1').style.display = 'block'
        document.querySelector('#contents2').style.display = 'none'
    }
    function changeCOntentg2(){
        document.querySelector('#contents2').style.display = 'block'
        document.querySelector('#contents1').style.display = 'none'
    }
    </script>
</head>
<body>
    <div id="Navigation"></div>
    <div class="container" style="width: 1200px;height:100%; margin: 0 auto; margin-top: 80px; background-color: rgb(246, 246, 246); padding-left: 40px; padding-top: 20px;">
        <div class="row">
            <div class="left">
                <div class="leftTop">
                    <img style="padding-left: 20px; padding-top: 20px; float: left;" src="https://pic1.zhimg.com/50/v2-c70fa52c486461e7d62f8c1f30269932_200x0.webp">
                    <p style="font-size: 25px; font-family: 黑体;position: relative; left: 40px; top: 40px;">危险的维纳斯</p>
                    <p style="font-size: 20px; font-family: 黑体;position: relative; left: 40px; top: 40px;">东野圭吾</p>
                    <p style="position: relative; left: 40px; top: 40px;">
                        <button>小说</button><button style="margin-left:20px">磨铁图书出版</button><button style="margin-left:20px">知乎电子书</button>
                    </p>
                    <p style="font-size: 25px; font-family: 黑体;position: relative; left: 40px; top: 120px;">￥22.50</p>
                    <span style="font-size: 18px; font-family: 黑体;position: relative; left: 380px; top: 75px;"><button style="background-color:rgb(230,242,255); border-color: transparent;">试读</button><button style="margin-left: 30px; background-color: rgb(0, 132, 255); color: white; border-color: transparent; border-radius: 5%;" data-toggle="modal" data-target="#myModal">立即购买</button></span>
                    <hr style="clear: both;">
                    <p>
                        <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true" style="font-size: 30px; margin-left: 40px; margin-top: 12px; color: rgb(159, 173, 199);" onclick="dianzan(this)"></span><span style="font-size: 20px; position: relative; left: 10px; top: -4px;">24</span>
                        <span type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="分享是不可能分享了，这辈子都不可能分享了" style="border:none; position: relative; top: -10px; left: 10px;"><span class="glyphicon glyphicon-send" aria-hidden="true" style="font-size: 30px; color: rgb(159, 173, 199);" ></span><span style="font-size: 20px; position: relative; left: 10px; top: -4px;">分享</span></span>
                    </p>
                </div>
                <div class="leftBottom">
                    <div class="bottom_title">
                        <span onclick="changeContent1()">简介</span> <span style="padding-left: 20px;" onclick="changeCOntentg2()">目录</span>
                    </div>
                    <div id="contents1" style="display: block;">
                    <div class="bottom_content">
                        <p style="padding-top: 30px; padding-left: 20px; font-size: 20px; color: pink; font-style: italic;">[维纳斯]不是某个人，而是存在于我们每个人心中令人疯狂的东西。</p>
                        <p style="padding-top: 30px; padding-left: 20px; font-size: 18px;">一个陌生女人的电话，一起失踪事件，动物医生手岛伯朗卷入一场正在进行的犯罪事件。没有任何线索，甚至连同伴也不能完全信任。那个隐藏在家人中的凶手到底是谁？

                            「维纳斯」不是某个人，而是存在于我们每个人心中令人疯狂的东西。恶不是一开始就存在，东野圭吾在这本书里诠释了好人是如何变成恶魔的。复杂的情节，反转再反转，但反转的是故事，还是人心？</p>
                    </div>
                    <div id="bottom_title2" style="display: block;">
                        <p style="padding-left: 20px; font-size: 20px; font-family: 黑体;">作者：<span>东野圭吾</span></p>
                        <p style="padding-left: 20px; font-size: 20px; font-family: 黑体;">上架时间：<span>2019-03</span></p>
                        <p style="padding-left: 20px; font-size: 20px; font-family: 黑体;">字数：<span>18万字</span></p>
                    </div>
                    <div class="bottom_title3">
                        <p style="padding-left: 45%; font-size: 25px; font-family: 微软雅黑;" onclick="doShow()">收起简介</p>
                    </div>
                </div>
                <div id="contents2" style="display:none">
                    暂时还未获取目录，请后续再关注我们的网站嗷？
                </div>
            </div>
            </div>
            <div class="right hidden-sm hidden-xs">
                <div class="right_top" style="width: 280px; height: 230px;"> 
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width: 280px; height: 230px;">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                          <li data-target="#carousel-example-generic" data-slide-to="0" class="active">
                          <li data-target="#carousel-example-generic" data-slide-to="1">
                          <li data-target="#carousel-example-generic" data-slide-to="2">
                        </ol>
                      
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox" style="width: 280px; height: 230px;"> 
                          <div class="item active" style="background-color:aqua;">
                            <img src="images/001.jpeg" alt="...">
                            <div class="carousel-caption">
                             
                            </div>
                          </div>
                          <div class="item" style="width: 280px; height: 230px;">
                            <img src="images/002.png" alt="...">
                            <div class="carousel-caption">
                            
                            </div>
                          </div>
                          <div class="item" style="width: 280px; height: 230px;">
                            <img src="images/003.jpeg" alt="...">
                            <div class="carousel-caption">
                              
                            </div>
                          </div>
                        </div>
                      
                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" style="width: 42px; height: 230px;">
                          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                          <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" style="width: 42px; height: 230px;">
                          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                          <span class="sr-only">Next</span>
                        </a>
                      </div>
                </div>
                
                <div class="clean_lear">
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style="width: 280px;">
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingOne">
                            <h4 class="panel-title">
                              <a  role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                读者寄语
                              </a>
                            </h4>
                          </div>
                          <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                            <div class="panel-body">
                             世间里难得的清净。
                            </div>
                          </div>
                        </div>
                        <div class="panel panel-default">
                          <div class="panel-heading" role="tab" id="headingTwo">
                            <h4 class="panel-title">
                              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                知遇的心
                              </a>
                            </h4>
                          </div>
                          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                            <div class="panel-body">
                                留足于此。
                            </div>
                          </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                  回答问题
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  发视频
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  写文章
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  写想法
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  Live
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  书店
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  圆桌
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  专栏
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  付费咨询
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  百科
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  我的收藏
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  我关注的问题
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  关注的话题
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  关注的专栏
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  关注的问题
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  关注的收藏夹
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  屏蔽用户
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                          <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                              <h4 class="panel-title">
                                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                  举报用户  
                                </a>
                              </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                              <div class="panel-body">
                                  留足于此。
                              </div>
                            </div>
                          </div>
                       
                        </div>
                      </div>
                </div>
            </div>
        </div> 
       

        </div>
    </div>
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">购买图书确认</div>
                <div class="modal-body">是否确认购买此书籍？</div>
                <div class="modal-footer">
                    <button onclick="domywork()" data-dismiss="modal">确认</button>
                    <button data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

    
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script>

        $("#Navigation").load("Navigation.html");
  

    </script>
</body>
</html>